<template>
	<view>
		<view class="tab-content">
			<slot />
		</view>
		<view class="tabbar">
			<view class="navigator">
				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
					@click="switchTab(item,index)">
					<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
					<img :src="item.selectedIconPath" class="icon" v-else>
					<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		// watch: {
		// 	$route: {
		// 		immediate: true,
		// 		handler(to) {
		// 			if (to && to.meta.isTabBar) {
		// 				// this.__path__ = this.$route.path
		// 				// this.showselected = true
		// 				const index = this.tabBar.list.findIndex(item => to.meta.pagePath === item.pagePath)
		// 				if (index > -1) {
		// 					this.selectedIndex = index
		// 				}
		// 			}
		// 		}
		// 	}
		// },
		data() {
			return {
				selectedIndex: uni.getStorageSync('selectedIndex') || 0,
				// showselected: false,
				tabBar: {
					list: [{
							"pagePath": "pages/home/home",
							"text": "首页"
						},
						{
							"pagePath": "pages/my/my",
							"text": "我的"
						}
					]
				},
			}
		},
		methods: {

			/* 
			// 调整前
			methods: {
				switchTab(index, item) {
					let url = '/' + item.pagePath
					let pagePath = url
					const detail = {
						index,
						pagePath
					}
					if (this.$route.path !== url) {
						// this.__path__ = this.$route.path
						uni.switchTab({
							from: 'tabBar',
							url,
							detail
						})
					} else {
						// UniServiceJSBridge.emit('onTabItemTap', detail)
					}
					this.selectedIndex = index
					// this.$emit('switchTab', detail)
				}
			}, */
			// 调整后，1、调换入参顺序，方便传值，2、循环判断一下index，
			switchTab(item, index) {
				let url = '/' + item.pagePath
				let pagePath = url
				uni.switchTab({
					url
				})
				this.tabBar.list.forEach((v, i) => {
					if (item.pagePath === v.pagePath) {
						uni.setStorageSync('selectedIndex', index);
					}
				})
			}
		},
	}
</script>

<style>
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 999;
		background: #F5F5F5;
		border-top: 2rpx solid #eee;
	}

	.navigator {
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: 0 auto;
	/* 	padding: 20rpx; */
	}

	.navigator-item {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 50rpx;
		height: 100%;
	}

	.item-text {
/* 		margin-top: 6rpx; */
		color: #777E86;
		font-size: 24rpx;
	}

	.text-active {
		color: #2E92FD !important;
	}

	.icon {
		width: 20px;
		height: 20px;
	}
</style>